<template>
    <BaseContent>
        <div class="card mb-3 card_single" style="max-width: 540px;" v-for="book in bookshelf.books" :key="book.id">
            <div class="row g-0 borrowed_book_info">
                <div class="col-md-4">
                <img :src="book.photo" class="img-fluid rounded-start borrowed_book_photo" alt="...">
                </div>
                <div class="col-md-8">
                <div class="card-body">
                    <h5 class="card-title">{{ book.bookname }}</h5>
                    <h6 class="card-title">作者：{{ book.bookauthor }}</h6>
                    <p class="card-text" style="display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; text-overflow: ellipsis;">{{ book.description }}</p>
                    <p class="card-text"><small class="text-muted">借书时间：{{ book.borrowedtime }}</small></p>
                    <button type="button" class="btn btn-danger" @click="return_book(book.book_id, book.bookname, book.bookauthor, book.bookstock, book.bookscore, book.bookpublisher)" v-if="book.is_apply === 'false'">去还书</button>
                    <button type="button" class="btn btn-info btn-apply-return" v-if="book.is_apply === 'true'">申请还书中</button>
                </div>
                </div>
            </div>
        </div>
        <div class="tanchuang" v-if="is_open">
            <div class="mb-3">
                <div class="info_confirm">请确认学号是否正确</div>
                <input type="text" class="form-control" :placeholder="$store.state.user.username" disabled>
                <div class="info_confirm">请确认是否是所选书籍</div>
                <input type="text" class="form-control" :placeholder="return_bookname" disabled>
            </div>
            <div>
                <button type="button" class="btn btn-success btn-tanchuang btn-1" @click="confirm_return">确定</button>
                <button type="button" class="btn btn-info btn-tanchuang btn-2" @click="close">取消</button>
            </div>
        </div>
    </BaseContent>
</template>

<script>
import BaseContent from '@/components/BaseContent.vue';
import { reactive } from 'vue';
import { useStore } from 'vuex';
import { ref } from 'vue';
import $ from 'jquery';
import dayjs from 'dayjs';
export default {
    name: "MyBookShelfView",
    components: {
        BaseContent,
    },
    setup() {
        const bookshelf = reactive({});
        const store = useStore();
        const is_open = ref(false);
        const return_book_id = ref('');
        const return_bookname = ref('');
        const apply_return_list = ref([]);
        const return_book_author = ref('');
        const return_book_stock = ref('');
        const return_book_publisher = ref('');
        const return_book_score = ref('');
        const is_apply = ref('');
        const formattedDate = dayjs().format('YYYY-MM-DD HH:mm:ss');
        $.ajax({
            url: "http://47.121.28.202:8000/settings/borrowedbooks/",
            type: "GET",
            headers: {
                'Authorization': "Bearer " + store.state.user.access,
            },
            data: {
                user_id: store.state.user.id
            },
            success(resp) {
                bookshelf.count = resp.length;
                bookshelf.books = resp;
            }
        })
        const return_book = (idx, booknamex, author, stock, score, publisher) => {
            return_book_id.value = idx;
            return_bookname.value = booknamex;
            return_book_author.value = author;
            return_book_stock.value = stock;
            return_book_publisher.value = publisher;
            return_book_score.value = score;
            is_open.value = true;
        }
        const confirm_return = () => {
            $.ajax({
                url: "http://47.121.28.202:8000/settings/returnbook/",
                type: "GET",
                headers: {
                    'Authorization': "Bearer " + store.state.user.access,
                },
                success(resp) {
                    apply_return_list.value = resp;
                    const is_have = ref(false);
                    for (let i of apply_return_list.value) {
                        if (i.borrower_id === store.state.user.id && i.borrowed_id === parseInt(return_book_id.value)) {
                            is_have.value = true;
                        }
                    }
                    if (is_have.value === false) {
                        $.ajax({
                            url: "http://47.121.28.202:8000/settings/returnbook/",
                            type: "POST",
                            headers: {
                                'Authorization': "Bearer " + store.state.user.access,
                            },
                            data: {
                                bookname: return_bookname.value,
                                bookauthor: return_book_author.value,
                                borrower_id: store.state.user.id,
                                borrowed_id: parseInt(return_book_id.value),
                                returntime: formattedDate,
                                borrower_photo: store.state.user.photo,
                                stock: parseInt(return_book_stock.value),
                                borrower_name: store.state.user.nickname,
                                borrower_number: store.state.user.username,
                                borrower_classname: store.state.user.classname,
                                borrower_collegename: store.state.user.collegename,
                                borrowed_publisher: return_book_publisher.value,
                                borrowed_score: return_book_score.value,
                            },
                            success() {
                                $.ajax({
                                    url: "http://47.121.28.202:8000/settings/applyreturn/",
                                    type: "PATCH",
                                    headers: {
                                        'Authorization': "Bearer " + store.state.user.access,
                                    },
                                    data: {
                                        user_id: store.state.user.id,
                                        book_id: return_book_id.value,
                                        is_apply: "true",
                                    },
                                    success() {
                                        is_open.value = false; 
                                        $.ajax({
                                            url: "http://47.121.28.202:8000/settings/borrowedbooks/",
                                            type: "GET",
                                            headers: {
                                                'Authorization': "Bearer " + store.state.user.access,
                                            },
                                            data: {
                                                user_id: store.state.user.id
                                            },
                                            success(resp) {
                                                bookshelf.books = resp;
                                            }
                                        })
                                    }
                                })
                            }
                        })
                    } else {
                        $.ajax({
                            url: "http://47.121.28.202:8000/settings/returnbook/",
                            type: "PATCH",
                            headers: {
                                'Authorization': "Bearer " + store.state.user.access,
                            },
                            data: {
                                borrower_id: store.state.user.id,
                                borrowed_id: parseInt(return_book_id.value),
                                returntime: formattedDate,
                            },
                            success() {
                                is_apply.value = "true";
                            }
                        })
                    }
                }
            })
        }
        const close = () => {
            is_open.value = false;
        }
        return {
            bookshelf,
            return_book,
            confirm_return,
            close,
            is_open,
            return_bookname,
            is_apply,
        }
    }
}
</script>

<style scoped>
.card_single {
    display: inline-block;
    margin-left: 60px;
    position: relative;
    left: 30px;
}
.btn-danger {
    width: 100%;
}
.tanchuang {
    position: fixed;
    top: 50%; 
    left: 50%;  
    transform: translate(-50%, -50%);  
    height: 350px;  
    width: 500px;  
    background-color: rgba(211, 211, 211, 0.9);
    z-index: 1000;  
    display: flex;
    flex-direction: column;
    align-items: center; 
    justify-content: center;  
    padding: 20px;  
    box-sizing: border-box;
    border-radius: 10px;
}
.btn-tanchuang {
    width: 100px;
    margin: 20px;
}
.borrowed_book_photo {
    height: 100%;
}
.borrowed_book_info {
    width: 500px;
    height: 300px;
    position: relative;
}
.col-md-4 {
    height: 300px;
}
.btn-apply-return {
    width: 100%;
}
</style>